<template>
  <el-dialog
    :title="dataForm.id ? '编辑' : '新增'"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
    width="60%"
    height="50px"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="姓名" prop="name" required>
        <el-input
          v-model="dataForm.name"
          autocomplete="off"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age" required>
        <el-input-number
          v-model="dataForm.age"
          placeholder="请输入年龄(岁)"
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
          :min="0"
          :max="120"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="性别" prop="sex" required>
        <el-select v-model="dataForm.sex" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="家乡" prop="hometown">
        <el-input
          v-model="dataForm.hometown"
          autocomplete="off"
          placeholder="请输入家乡"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-input
          v-model="dataForm.hobby"
          autocomplete="off"
          placeholder="请输入爱好"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-date-picker
        value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择时间和日期"
          v-model="dataForm.birth"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="dataForm.id ? update() : add()"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import axios from "axios";
import qs from "qs";
import { addBro, updBro } from "../api/broApi";
export default {
  data() {
    return {
      //性别选项框
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 0,
          label: "女",
        },
      ],
      // 控制当前的弹框的显示与隐藏
      dialogFormVisible: false,
      // 表单数据，定义和初始化
      dataForm: {
        id: "",
        sex: "",
        name: "",
        age: "",
        hometown: "",
        hobby: "",
        birth: "",
      },
    };
  },
  methods: {
    init(row) {
      //得先加载在显示;
      if (row) {
        this.dataForm.id = row.id;
        this.dataForm.name = row.name;
        this.dataForm.sex = row.sex;
        this.dataForm.age = row.age;
        this.dataForm.hometown = row.hometown;
        this.dataForm.hobby = row.hobby;
        this.dataForm.birth = row.birth;
      }
      //新增清空表格
      else {
        this.dataForm.id = "";
        this.dataForm.name = "";
        this.dataForm.sex = "";
        this.dataForm.age = "";
        this.dataForm.hometown = "";
        this.dataForm.hobby = "";
        this.dataForm.birth = "";
      }
      this.dialogFormVisible = true;
    },
    //新增新的
    add() {
      // 表单校验
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("校验不通过");
          return;
        }
        let query = this.$qs.stringify(this.dataForm);
        addBro(query)
          .then((data) => {
            this.dialogFormVisible = false;
            this.$message.success("新增成功");
            this.$parent.refreshDataList();
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      });
    },

    update() {
      // 表单校验
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("校验不通过");
          return;
        }
        let query = this.$qs.stringify(this.dataForm);
        updBro(query)
          .then((data) => {
            this.dialogFormVisible = false;
            this.$message.success("更新成功");
            this.$parent.refreshDataList();
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      });
    },

    // 新增待办老的
    addOld() {
      // 表单校验
      //let _this = this;
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("校验不通过");
          return;
        }

        axios
          .post(
            "http://localhost:8081/student/addStudent.do",
            qs.stringify({
              sex: this.dataForm.sex,
              name: this.dataForm.name,
              hometown: this.dataForm.hometown,
              age: this.dataForm.age,
              hobby: this.dataForm.hobby,
            })
          )
          .then((response) => {
            this.dialogFormVisible = false;
            this.$message.success("新增成功");
            this.$emit("refreshDataList");
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    },
  },
};
</script>

